<template>
	<view class="page">
		<text lines="1" class="please">请选择您的职业</text>
		<view class="choice">
			<view class="box" v-for="item in list" :key="item.id" @click="choice(item.id)">
				<image :src="item.src" class="imgBox"></image>
				<text lines="1" class="iam">{{item.title}}</text>
				<image src="../../../static/img/careerChoice/noChoice.png" class="dot" v-if="item.selected"></image>
				<image src="../../../static/img/careerChoice/choice.png" class="dot1" v-else></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isOk: true,
				list: [{
					id: '1',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/c5ce7b2f22f743df.png',
					title: '我是护士',
					selected: true
				}, {
					id: '2',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/f9427dca0e4d4748.png',
					title: '我是护工',
					selected: true
				}, {
					id: '4',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/05c4f0f0bbe44d05.png',
					title: '我是康复师',
					selected: true
				}, {
					id: '3',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/270b5bc7eef64a8d.png',
					title: '我是理疗师',
					selected: true
				}, {
					id: '5',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/b3f9cf3084c24e64.png',
					title: '我是推拿师',
					selected: true
				}, 
				{
					id: '6',
					src: 'http://loto.oss-cn-shanghai.aliyuncs.com/ali/b3f9cf3084c24e64.png',
					title: '我是陪诊师',
					selected: true
				},
				]
			}
		},
		methods: {
			choice(id) {
				/* this.list.forEach((item) => {
					if (item.id === id) {
						item.selected = false
						console.log(item.id);
						if (item.id === '1') {
							uni.navigateTo({
								url: "../iden/professionOk?type=0",
							})
						} else if (item.id === '2') {
							uni.navigateTo({
								url: "../iden/professionOk?type=1",
							})

						} else {
							uni.showToast({
								title: '暂未开放服务',
								icon: 'none',
								duration: 2000
							});
						}
					} else {
						item.selected = true
					}
				}) */
				this.list = this.$options.data().list
				// 已开放的渠道
				if (['1', '2', '3', '4','6'].includes(id)) {
					const targetIndex = this.list.findIndex(item => item.id === id)
					this.list[targetIndex].selected = false
					this.$set(this.list, targetIndex, this.list[targetIndex])
					uni.navigateTo({
						url: `../iden/professionOk?type=${id-1}`,
					})
				} else {
					const targetIndex = this.list.findIndex(item => item.id === id)
					this.list[targetIndex].selected = !this.list[targetIndex].selected
					this.$set(this.list, targetIndex, this.list[targetIndex])
					uni.showToast({
						title: '暂未开放服务',
						icon: 'none',
						duration: 2000
					});
				}

			}
		}
	}
</script>
<style scoped lang="less">
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 750rpx;
		overflow-y: scroll;
		min-height: 100vh;
		// height: 1624rpx;
		// overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.please {
		width: 308rpx;
		height: 60rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 44rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 60rpx;
		margin: 46rpx 0 0 50rpx;
	}

	.choice {
		width: 698rpx;
		// height: 1138rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 44rpx 0 160rpx 26rpx;
	}

	.box {
		width: 698rpx;
		height: 202rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng33bb0fdf7f5e1ae60ecc590cbb55e10170d37b40f93bdefb2495fe3ad1689c40) 100% no-repeat;
		background-size: 100% 100%;
		flex-direction: row;
		display: flex;
		margin-bottom: 26rpx;
	}

	.imgBox {
		width: 128rpx;
		height: 128rpx;
		margin: 38rpx 0 0 50rpx;
	}

	.iam {
		width: 160rpx;
		height: 56rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 40rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 56rpx;
		margin: 74rpx 0 0 110rpx;
		// margin: 74rpx 158rpx 0 0;
	}

	.dot {
		width: 40rpx;
		height: 40rpx;
		margin: 82rpx 120rpx 0 80rpx;
	}

	.dot1 {
		width: 40rpx;
		height: 40rpx;
		margin: 82rpx 120rpx 0 80rpx;
	}
</style>